<template>
	<view class="">
		<view class="sign"  v-if="isShow">
			<view class="tip-area">
				<image src="/static/images/icon/sign_success_center.png" mode="aspectFill"></image>
			</view>
			<view class="tip-content">
				<view class="content">
					<image src="/static/images/icon/sign_success_left.png" mode="aspectFill"></image>
					<view class="tip">获得<text>{{todayReward}}</text>鲸币</view>
					<image src="/static/images/icon/sign_success_right.png" mode="aspectFill"></image>
				</view>
				<view class="tomorrow">明天签到可得<text>{{tomorrowReward}}</text>鲸币</view>
			</view>
			<view class="readed" @tap.stop="cancel">知道了</view>
			<view class="close" @tap.stop="cancel">
				<image src="/static/images/icon/sign_success_skip.png" mode="aspectFill"></image>
			</view>
			
		</view>
		<view v-if="isShow" class="mask-f">
			<view class="mask"></view>
		</view>
	</view>
	
	
</template>

<script>
	export default {
		props:{
			isShow:{//是否显示签到成功组件
				type:Boolean,
				default:false
			},	
			todayReward:{//今天签到收益
				type:String,
				default:''
			},	
			tomorrowReward:{//明天签到收益
				type:String,
				default:''
			},	
		},
		data() {
			return {
			}
		},
		computed:{
		},
		methods:{
			
			cancel() {//关闭弹窗
				this.$emit('close')
			},
		}
	}
</script>

<style lang="scss">
.sign {
	position: fixed;
	height: 450rpx;
	width: 610rpx;
	align-items: center;
	flex-direction: column;
	display: flex;
	background-color: #FFFFFF;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 999;
	border-radius: 30rpx;
	
}
.tip-area {
	top: -196rpx;	
	image {
		width: 360rpx;
		height: 240rpx;
	}
}
.close {
	bottom: -164rpx;	
	image {
		width: 80rpx;
		height: 80rpx;
	}
}
.tip-area,.close {
	display: flex;
	justify-content: center;
	position: relative;
}
.readed {
	margin-top: 60rpx;
	border-radius: 50rpx;
	width: 300rpx;
	height: 70rpx;
	text-align: center;
	line-height: 70rpx;
	color: #FFFFFF;
	font-size: 34rpx;
	background-color: #fed906;
}
.tip-content {
	display: flex;
	position: absolute;
	flex-direction: column;
	top: 100rpx;
	align-items: center;
	width: 320rpx;
	height: 180rpx;
	.tomorrow {
		margin-top: 40rpx;
		color: #a6a6a6;
		letter-spacing: 2rpx;
		text {
			color: #ef8133;
			
		}
	}
	.content {
		display: flex;
		align-items: baseline;
		.tip {
			font-weight: 600;
			font-size: 38rpx;
			padding: 0 10rpx;
			letter-spacing: 4rpx;
			text {
				color: #ef8133;
				
			}
		}
		image {
			width: 36rpx;
	    height: 24rpx;
		}
	}
	
}
.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:  20rpx 40rpx 0;
	position: absolute;
	
}
.surplus {
	color: #3f3f3f;
	padding: 0 40rpx;
}
.title {
	color: #383838;
	font-size: 34rpx;
	line-height: 80rpx;
}
.cancel {
	image {
		width: 35rpx;
		height: 35rpx;
	}
}
.selections {
	display: flex;
	flex-wrap: wrap;
	width: 530rpx;
	padding: 40rpx;
	height: 220rpx;
	justify-content: space-between;
}
.select-item {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;
	width: 164rpx;
	height: 88rpx;
	color: #3f3f3f;
	border: 1rpx solid #e9e9e9;
}
.active {
	border: 1rpx solid #068fff;
}
.words {
	display: flex;
	padding-left:40rpx;
	align-items: center;
	input {
		background: #f2f2f2;
		padding: 0 30rpx;
		border-radius: 10rpx;
	}
}
.pay,.lack_pay {
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	color: #FFFFFF;
	border-radius: 10rpx;
	margin:40rpx;
}
.pay {
	background-color: #068fff;
}
.lack_pay {
	background-color: #ff6e6e;
}

.pay-tip {
	display: flex;
	height: 44rpx;
	padding: 30rpx 0;
	justify-content: center;
	letter-spacing: 3rpx;
	.count {
		font-size: 36rpx;
		line-height: 44rpx;
		color: #068fff;
	}
	.tip {
		color: #068fff;
		height: 44rpx;
		line-height: 44rpx;
		font-size: 34rpx;
		text:nth-last-child(2) {
			color: #3f3f3f;
			font-size: 32rpx;
		}
		text:nth-last-child(1) {
			color: #3f3f3f;
			font-size: 32rpx;
		}
	}
	.unenoughtip {
		color: #ff6e6e;
		height: 44rpx;
		line-height: 44rpx;
		text {
			color: #ff6e6e;
		}
	}
}
.addclass {
	border: 1rpx solid #068fff;
	color: #068fff;
}
.mask-f {
	z-index: 1;
	width: 100%;
	height:100vh;
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	.mask {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.2);
	}
}
</style>
